<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue.js-001</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
		<div id="app-1">
			{{message}}
		</div>
		<div id="app-2">
			<span v-bind:title='message'>
				鼠标悬停几秒钟查看此处动态绑定的提示信息！
			</span>
		</div>
		<p>条件语句控制显示隐藏：</p>
		<div id="app-3">
			<p v-if='show'>控制元素显示与否</p>		
		</div>
		<p>循环语句：</p>
		<div id="app-4">
			<ol>
				<li v-for='todo in todos'>
					{{todo.text}}
				</li>
			</ol>
		</div>
		<p>绑定事件：</p>
		<div id="app-5">
			<p>{{message}}</p>
			<button v-on:click='reverseMessage'>反转文本</button>
		</div>
		<p>数据双向绑定：</p>
		<div id="app-6">
			<p>input.val = {{message}}</p>
			<input v-model='message' type="text" />
		</div>
		<script type="text/javascript">
			var app1 = new Vue({//实现文本绑定；
				el:'#app-1',
				data:{
					message:'Hello Vue!'
				}
			})
			var app2 = new Vue({//实现绑定DOM元素属性；
				el:'#app-2',
				data:{
					message:'页面加载于'+new Date()
				}
			})
			var app3 = new Vue({//实现元素显示隐藏控制；
				el:'#app-3',
				data:{
					show:true
				}
			})
			var app4 = new Vue({//实现绑定数组循环；
				el:'#app-4',
				data:{
					todos:[
						{text:'study javascript'},
						{text:'study Vue.js'},
						{text:'study All'}
					]
				}
			})
			var app5 = new Vue({//实现事件绑定
				el:'#app-5',
				data:{
					message:'Hello Vue.js!'
				},
				methods:{
					reverseMessage:function(){
						this.message = this.message.split('').reverse().join('')
					}
				}
			})
			var app6 = new Vue({//实现model双向绑定
				el:'#app-6',
				data:{
					message:'Hello Vue.js!ss'
				}
			})
		</script>
	</body>
</html>
